<template>
    <div class="container-fluid">
        <div class="panel panel-info">
            <vxe-toolbar class="panel-heading">
                <template #buttons>
                    <div class="row">
                        <div class="col-1">
                            <vxe-button type="text" status="info" icon="fa fa-chevron-left"
                                        @click="$router.push('/sys/role?action=back')"
                                        content="列表" :loading="isLoading">
                            </vxe-button>
                        </div>
                        <div class="col-10" style="text-align: center;">
                            <label>编辑角色</label>
                        </div>
                    </div>
                </template>
            </vxe-toolbar>
            <div class="panel-body">
                <vxe-form ref="xForm" :data="role" :rules="roleRules" span="24" title-align="right" title-width="100"
                          title-asterisk>
                    <vxe-form-item title="角色名" field="name">
                        <template #default="params">
                            <vxe-input class="input" v-model="role.name" placeholder="请输入角色名" prefix-icon="fa fa-user"
                                       clearable
                                       @input="$refs.xForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="代码" field="code">
                        <template #default="params">
                            <vxe-input class="input" v-model="role.code" placeholder="请输入代码，供程序调用"
                                       prefix-icon="fa fa-user" clearable
                                       @input="$refs.xForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="描述" span="24" field="represent">
                        <template #default="params">
                            <vxe-textarea :autisize="{minRows:2,maxRows:10}" v-model="role.represent"
                                          placeholder="请输入描述"
                                          maxlength="100" show-word-count clearable
                                          @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
                        </template>
                    </vxe-form-item>
                </vxe-form>
            </div>
            <div class="panel-footer" style="text-align: center;">
                <vxe-button type="text" status="success" icon="fa fa-save" @click="submit()" :content="btnSubmitName"
                            :loading="isLoading">
                </vxe-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SysRoleEdit',
    data () {
        return {
            role: {id: null, name: '', code: '', represent: ''},
            roleRules: {
                name: [{required: true, message: '请输入角色名'}, {min: 2, max: 10, message: '角色名在2到10个字符时间'}],
                code: [{required: true, message: '请输入角色代码'}, {min: 2, max: 10, message: '角色代码在2到10个字符时间'}],
                represent: [{required: true, message: '请输入角色描述'}, {min: 5, max: 100, message: '角色描述在5到100个字符时间'}]
            },
            isLoading: false,
            btnSubmitName: '保存'
        }
    },
    created () {
        this.role.id = this.$route.params.id
        this.loadData()
    },
    methods: {
        loadData () {
            this.$request.get(this.$apiSys.roleGetUrl, {id: this.role.id}, true).then(res => {
                console.log(res)
                if (res.status) {
                    res.data.createTime = null
                    res.data.updateTime = null
                    res.data.deleteTime = null
                    this.role = res.data
                } else {
                    this.$router.push('/sys/role?action=back')
                }
            })
        },
        submit () {
// 校验表单
            this.$refs.xForm.validate(result => {
                console.log(result)
                if (result !== undefined) {
                    this.$XModal.alert({
                        content: '请检查表单项是否填写正确',
                        status: 'error'
                    })
                    return false
                }
                this.isLoading = true
                this.btnSubmitName = '正在保存，请稍后...'
                this.$request.post(this.$apiSys.roleEditUrl, this.role).then(res => {
                    if (res.status) {
                        this.$XModal.message({
                            content: '保存成功',
                            status: 'success'
                        })
                        this.$router.push('/sys/role')
                    } else {
                        // this.$XModal.message({
                        //   content: res.msg,
                        //   status: 'error'
                        // })
                        this.isLoading = false
                        this.btnSubmitName = '保存'
                    }
                }, err => {
                    this.isLoading = false
                    this.btnSubmitName = '保存'
                })
            })
        }
    }
}
</script>

<style scoped>

</style>
